<template>
  <div style="background: #fffdf4">
    <!-- <el-header :class="isCollapse ? 'header' : 'headerno'"> -->
    <!-- <el-header class="header"> -->
    <div style="padding-left: 5%;">
      <img class="header" :src="userImg" />
    </div>
    <!-- </el-header> -->
    <el-aside :width="isCollapse ? '64px' : '250px'">
      <el-menu background-color="#fffdf4" text-color="#202020" active-text-color="#F8F3D7" class="el-menu-vertical-demo"
        :default-active="selectedMenuId" :collapse="isCollapse" :collapse-transition="false" @select="handleSelect"
        @open="handleOpen" @close="handleClose">
        <!-- <li class="aside-div" v-show="isCollapse ? false : true">
          <div class="aside-div-one">
            <el-avatar
              :size="60"
              src="squareUrl"
              style="width: 100%; height: 100%; float: left"
            >
              <img :src="userImg" />
            </el-avatar>
          </div>
          <div class="aside-div-two">
            <div
              style="
                width: 100%;
                height: 25px;
                border: 0px solid white;
                color: white;
              "
              slot="title"
            >
              <span style="margin-top: -88px; position: absolute"
                >My System</span
              >
            </div>
            <div style="width: 100%; height: 25px">
              <div class="aside-div-three">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Profile"
                  placement="top"
                >
                  <i class="el-icon-user-solid"></i>
                </el-tooltip>
              </div>
              <div class="aside-div-four">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Mail"
                  placement="top"
                >
                  <i class="el-icon-s-finance"></i>
                </el-tooltip>
              </div>
              <div class="aside-div-four">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Setting"
                  placement="top"
                >
                  <i class="el-icon-s-tools"></i>
                </el-tooltip>
              </div>
              <div class="aside-div-four">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="Logout"
                  placement="top"
                >
                  <i class="el-icon-s-comment"></i>
                </el-tooltip>
              </div>
            </div>
          </div>
        </li> -->
        <NavMenu :navMenus="totalList"></NavMenu>
      </el-menu>
    </el-aside>
  </div>
</template>

<script>
// import config from "../router/config";

import { getUserInfo } from "../api/userService";
import NavMenu from "./Menulist";
import { mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      current: state => state.tab.currentMenu
    }),
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    }
  },
  data() {
    return {
      userImg: require("../assets/img/slogan.jpg"),
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      totalList: [],
      selectedMenuId: '/home',
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      if (key) {
        this.saveSelectedMenu(key);
      }
      this.$router.push({
        path: key,
        params: { data: "query" }
      });
    },
    async queryUserInfo() {
      getUserInfo().then(res => {
        if (res.code == 200) {
          this.totalList = res.data.menus;
        } else {
          this.$message.error("Failed to obtain user information");
        }
      });
    },
    saveSelectedMenu(menuId) {
      localStorage.setItem('selectedMenu', menuId);
    },
    loadSelectedMenu() {
      const selectedMenu = localStorage.getItem('selectedMenu');
      if (selectedMenu) {
        this.selectedMenuId = selectedMenu; // 假设你有一个属性或数据项用于存储当前选中的菜单ID
      }
    },
  },
  components: {
    NavMenu
  },
  created() {
    // this.totalList = config;
    this.queryUserInfo();
    this.loadSelectedMenu();
  }
};
</script>
<style scoped>
@import "../assets/css/index.less";
</style>
